<template>
    <div>
        <van-nav-bar title="用户登录" id="nav"></van-nav-bar>
        <img :src="imgUrlFourth" alt="" class="bgImg">
        <p class="goRegister" @click="registerClick">还没有账号？去注册＞</p>
        <van-form @submit="onSubmit">
        <van-field
        v-model="form.useremail"
        name="邮箱"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请填写邮箱地址' }]"
        />
        <van-field
        v-model="form.userpass"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="submit">
            <van-button round block type="info" native-type="submit">
                登录
            </van-button>
        </div>
        </van-form>
    </div>
</template>
<script>
import { Notify } from 'vant';
export default {
    name:'login',
    data() {
        return {
            form:{
            useremail: '',
            userpass: '',
            },
            imgUrlFourth:require("../../assets/login.png"),
        }
    },
    methods:{
        registerClick() {
            this.$router.push('/register').catch(err => err)
        },
         onSubmit() {
             let params = new URLSearchParams();
            params.append('email', this.form.useremail);
            params.append('password', this.form.userpass);
            localStorage.useremail = this.form.useremail;
            localStorage.userpass = this.userpass;
            this.axios({
                method: "post",
                url: this.$store.state.url+"/auth/login",
                data: params,
            }).then((res) => {
                if(res.data.code == "00000"){
                    Notify({ type: 'danger', message: '账号或密码错误' });
                    this.form.useremail=""
                    this.form.userpass=""
                }else{
                    console.log(res.data);
                    localStorage.token = res.data.data.token;
                    this.$store.state.token =res.data.data.token;
                    console.log(localStorage.token);   
                    this.$router.push({path:'/',query:{fresh:true}});
                }
            }).catch((err) => {
                console.log(err);
            })
        },
    },
    created(){
        if(localStorage.useremail){
            this.form.useremail= localStorage.useremail;
            this.userpass =localStorage.userpass;
        }
    }
}
</script>
<style scoped>
img{
    margin-top: 50px;
    }
form.van-form{
  margin-top: 50px;
}
 .van-nav-bar{
    z-index: 2000;
    font-size: 20px;
    border-right: 2px solid white;
    border-bottom: 1px solid rgb(223, 223, 223);
    height: 50px;
}
.bgImg {
    width: 100%;
    height: 250px
}
.goRegister {
    float: right;font-size: 14px;
    padding: 5px;
    text-decoration: underline;
    color: blue
}
.submit {
    margin: 16px
}
</style>